<script lang="ts" setup>
import PanelGroup from './components/PanelGroup.vue'
import {
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElRow,
  ElCol,
  ElCard,
  ElInput,
  ElSelect,
  ElOption,
  ElPagination,
  ElSkeleton,
  ElTable,
  ElTableColumn,
  FormRules,
  FormInstance
} from 'element-plus'
import { Echart } from '@/components/Echart'
import { lineOptions } from './echarts-data'
import { ref, reactive, unref } from 'vue'
import { getMonthlyPaymentsApi } from '@/api/dashboard/analysis'
import { getMiniTicketsListApi, resolveMiniTicketsApi } from '@/api/mini-ticket'
import { MiniTicket } from '@/api/mini-ticket/types'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatDate } from '@/utils'

const loading = ref(true)
const data = ref<MiniTicket[]>([])
const conditions = reactive({
  dates: '',
  status: 'Pending',
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  order: '-created_at'
})

const dialogVisible = ref(false)
const instance = ref<MiniTicket>(new MiniTicket())
const rules = ref<FormRules>({
  comment: [{ required: true, message: '请输入解决方案', trigger: 'blur' }]
})
const formRef = ref<FormInstance>()

const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

// 每月支付总额
const getMonthlySales = async () => {
  const res = await getMonthlyPaymentsApi().catch(() => {})
  if (res) {
    const values = res.data

    set(
      lineOptionsData,
      'xAxis.data',
      values.map((v) => v.period)
    )
    set(lineOptionsData, 'series', [
      {
        name: '交易金额',
        smooth: true,
        type: 'line',
        data: values.map((v) => v.amount),
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    ])
  }
}

const getMiniTickets = async () => {
  const { data: res } = await getMiniTicketsListApi(conditions)
  data.value = res.rows
  conditions.total = res.count
}

const resolve = async (row: MiniTicket) => {
  instance.value = new MiniTicket(row)
  dialogVisible.value = true
}

const MiniTicketStatus = {
  Pending: '待处理',
  Closed: '已处理'
}

const getStatus = (row: MiniTicket) => {
  return MiniTicketStatus[row.status!] || row.status
}

const onDialogConfirm = async () => {
  const form = unref(formRef)
  form?.validate(async (valid) => {
    if (valid) {
      await resolveMiniTicketsApi(instance.value.id!, instance.value).then(() => {
        dialogVisible.value = false
      })
      await getMiniTickets()
    }
  })
}

const getAllApi = async () => {
  await Promise.all([getMonthlySales(), getMiniTickets()])
  loading.value = false
}

getAllApi()
</script>

<template>
  <PanelGroup />
  <ElRow :gutter="20" justify="space-between">
    <ElCol :span="24">
      <ElCard class="mb-20px" shadow="hover">
        <ElSkeleton :loading="loading" :rows="4" animated>
          <Echart :height="350" :options="lineOptionsData" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>

  <div class="tool-box">
    <div>客人反馈</div>
    <div class="search">
      <ElDatePicker
        v-model="conditions.dates"
        end-placeholder="结束日期"
        start-placeholder="开始日期"
        type="daterange"
        value-format="YYYY-MM-DD"
        @change="getMiniTickets"
      />

      <ElSelect
        v-model="conditions.status"
        clearable
        placeholder="反馈状态"
        @change="getMiniTickets"
      >
        <ElOption label="待处理" value="Pending" />
        <ElOption label="已处理" value="Closed" />
      </ElSelect>
    </div>
    <div>
      <ElButton type="primary" @click="getMiniTickets">刷新</ElButton>
    </div>
  </div>
  <ElTable
    :data="data"
    border
    header-cell-class-name="cu-header-cell"
    highlight-current-row
    style="width: 100%; margin-top: 20px"
  >
    <ElTableColumn label="反馈时间" show-overflow-tooltip width="180">
      <template #default="{ row }">
        {{ formatDate(row.created_at, 'YYYY-MM-DD HH:mm:ss') }}
      </template>
    </ElTableColumn>

    <ElTableColumn
      :min-width="180"
      label="反馈内容"
      prop="description"
      show-overflow-tooltip
      width="auto"
    />

    <ElTableColumn label="手机号" prop="mobile" show-overflow-tooltip width="180" />

    <ElTableColumn label="状态" prop="status" show-overflow-tooltip width="80">
      <template #default="{ row }">
        {{ getStatus(row) }}
      </template>
    </ElTableColumn>

    <ElTableColumn label="解决方案" prop="comment" show-overflow-tooltip width="180" />

    <ElTableColumn label="解决人" prop="updater.login_name" show-overflow-tooltip width="180" />

    <ElTableColumn
      align="center"
      header-align="center"
      label="操作"
      show-overflow-tooltip
      width="90"
    >
      <template #default="{ row }">
        <ElButton
          v-hasPermi="'miniprogram:mini-ticket:resolve'"
          link
          type="primary"
          @click="resolve(row)"
        >
          关闭
        </ElButton>
      </template>
    </ElTableColumn>
  </ElTable>

  <ElPagination
    v-model:current-page="conditions.pageIndex"
    v-model:page-size="conditions.pageSize"
    :background="true"
    :page-sizes="[10, 20, 30, 40, 50, 100]"
    :total="conditions.total"
    class="mt-10px"
    layout="sizes, prev, pager, next, jumper, ->, total"
    @size-change="getMiniTickets"
    @current-change="getMiniTickets"
  />

  <ElDialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    draggable
    title="解决反馈"
    width="500px"
  >
    <ElForm ref="formRef" :model="instance" :rules="rules" label-width="100">
      <ElFormItem label="解决方案" prop="comment">
        <ElInput v-model="instance.comment" :rows="5" maxlength="200" type="textarea" />
      </ElFormItem>
    </ElForm>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="onDialogConfirm">确认</el-button>
      </span>
    </template>
  </ElDialog>
</template>

<style lang="less" scoped>
.tool-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  .search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
